<template>
  <div class="box">
    <button @click="maskedIsshow=true">点击</button>
    <div
      class="box1"
      v-if="maskedIsshow"
    >

      <div class="container">
        <!-- 主要内容 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          class="masked"
        >
          <div
            class="turnoff el-icon-close"
            @click="maskedIsshow=false"
          ></div>
          <div class="form-wrapper">
            <!-- 表单头部tab -->
            <el-row
              type="flex"
              justify="center"
              class="tabs"
            >
              <span
                :class="{ active: currentTab === index }"
                v-for="(item, index) in [`登录`, `注册`]"
                :key="index"
                @click="handleChangeTab(index)"
              >
                {{ item }}
              </span>
            </el-row>

            <!-- 登录功能组件 -->
            <LoginForm v-if="currentTab == 0" />

            <!-- 注册功能组件 -->
            <RegisterForm
              v-if="currentTab == 1"
              @successReg='currentTab=0'
            />
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import LoginForm from "@/components/user/LoginForm";
import RegisterForm from "@/components/user/RegisterForm";
export default {
  data() {
    return {
      currentTab: 0,
      maskedIsshow: false,
    };
  },
  methods: {
    handleChangeTab(index) {
      this.currentTab = index;
    },
  },
  components: {
    LoginForm,
    RegisterForm,
  },
};
</script>

<style lang="less" scoped>
.box1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  .masked {
    position: relative;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    margin-top: 250px;

    .turnoff {
      position: absolute;
      top: -55px;
      right: 250px;
      width: 30px;
      height: 30px;
      border-radius: 25px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 30px;
      color: white;
      font-size: 25px;

      &:hover {
        border-color: orange;
        color: orange;
        cursor: pointer;
      }
    }

    .form-wrapper {
      width: 400px;
      margin: 0 auto;
      background: #fff;
      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;

      .tabs {
        span {
          display: block;
          width: 50%;
          height: 50px;
          box-sizing: border-box;
          border-top: 2px #eee solid;
          background: #eee;
          line-height: 48px;
          text-align: center;
          cursor: pointer;
          color: #666;

          &.active {
            color: orange;
            border-top-color: orange;
            background: #fff;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>